<template>
  <layout title="countScroll数字滚动">
    <layout-content title="基础使用">
      <tn-count-scroll :value="value"></tn-count-scroll>
    </layout-content>

    <layout-content title="修改字体尺寸">
      <tn-count-scroll :value="value" font-size="60"></tn-count-scroll>
    </layout-content>

    <layout-content title="字体加粗">
      <tn-count-scroll :value="value" font-size="60" bold></tn-count-scroll>
    </layout-content>

    <layout-content title="修改颜色">
      <tn-count-scroll :value="value" font-size="60" color="tn-color-green"></tn-count-scroll>
    </layout-content>
    <view class="tn-flex-column">
      <view class="tn-col-12 tn-flex-column tn-flex-center tn-margin-top">
        <view><tn-button size="lg" @click="getRandomValue">更新数值</tn-button></view>
      </view>
    </view>
  </layout>

  <layout-doc v-model="showDoc" :content="docContent"></layout-doc>
  <doc-fab @click="handleDocFabClick"/>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { docContent } from './lib/doc'
import Layout from '@/components/layout/index.vue'
import LayoutContent from '@/components/layout/content.vue'
import LayoutDoc from '@/components/layout/doc.vue'
import DocFab from '@/components/doc-fab/index.vue'

import TnCountScroll from '@/tuniao-ui/components/tn-count-scroll/src/CountScroll.vue'
import TnButton from '@/tuniao-ui/components/tn-button/src/Button.vue'
import { getRandom } from '@/tuniao-ui/utils'

// 弹出文档 
let showDoc = ref<boolean>(false)
const handleDocFabClick = () => {
  showDoc.value = true
}

// 设置的数值
const value = ref<number>(0)
const getRandomValue = () => {
  value.value = Number(getRandom(1, 9999, false).toFixed(2))
}
</script>

<style lang="scss" scoped>
</style>
